/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-07 14:36:09
 * @LastEditors: chenbinfa
 * @LastEditTime: 2022-09-20 10:21:39
 */
import React, { useRef, useState, useEffect } from "react";
import {
	Spin,
	Input,
	InputNumber,
	Menu,
	Modal,
	Button,
	Tooltip,
	Dropdown,
	Descriptions,
	Select,
	Space,
	message,
	Tabs,
	Popconfirm,
	Checkbox,
	Card,
	Form,
	Collapse,
	Empty
} from "antd";
import { UserOutlined, DownOutlined, DeleteOutlined, SwapRightOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import _ from "lodash";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
import moment from "moment";
import copy from "copy-to-clipboard";
import { NavLink, Outlet, useParams } from "react-router-dom";
import { ThTable } from "@/components/ThTable";
import { isMobile } from "@utils";
import SearchBar from "@/components/SearchBar";
import { formatterCurrency, toLocaleString, formatSize } from "@utils/format";
import MList from "@/components/mobile/MList";
import Footer from "@/components/Footer";
import common from "@utils/common";
import { Pie } from '@ant-design/plots';
import api from "@services/";
import apiHelper from "@services/api-helper";
import DCard from "@/components/DCard";

const columns = [
	{
		title: "Rank",
		dataIndex: "rank",
		key: "rank",
		width: "5%",
		showType: "rank"
	},
	{
		title: "Accounts",
		dataIndex: "account",
		key: "account",
		width: "28%",
		textWrap: "word-break",
		showType: "copy-link",
		link: '/account/{account}'
	},
	{
		title: "Txn Count",
		dataIndex: "transfer_num",
		key: "transfer_num",
		width: "8%",
		textWrap: "word-break",
		ellipsis: true,
		showType: "link",
		tpl: "/account/{account}?Transfer",
	},
	{
		title: "Staking",
		dataIndex: "reserved",
		key: "reserved",
		width: "10%",
		textWrap: "word-break",
		showType: "balance-logo2"
	},
	{
		title: "Balance",
		dataIndex: "free",
		key: "free",
		width: "10%",
		textWrap: "word-break",
		showType: "balance-logo"
	},
	{
		title: "Ratio",
		dataIndex: "ratio",
		width: "10%",
		render: (text, record, index) => {
			return (parseFloat(record.ratio) * 100).toFixed(6) + ' %';
		}
	},
];

const Main = ({ className }) => {
	const navigator = useNavigate();
	const [loading, setLoading] = useState(false);
	const [totle, setTotle] = useState(0);
	const [config, setConfig] = useState();
	const [accountTypes, setAccountTypes] = useState();
	const [currSpaceInfo, setCurrSpaceInfo] = useState();
	const [total, setTotal] = useState({
		holders: '--',
		storageMiners: '--',
		consensusMiners: '--',
		nominators: '--'
	});
	async function initTotal() {
		setLoading(true);
		let res = await api.total.accountShange();
		if (res.msg == 'ok') {
			// console.log(res.data);
			setTotal(t => {
				t.holders = res.data;
				return t;
			});
		}
		await apiHelper.showTotal(api.total.sminer, setTotal, 'storageMiners');
		await apiHelper.showTotal(api.total.consensus, setTotal, 'consensusMiners');
		await apiHelper.showTotal(api.total.nominator, setTotal, 'nominators');
		setLoading(false);
	}


	document.title = "Account-CESS Scan";

	const init = async () => {
		let res = await api.account.types();
		if (res.msg != 'ok') {
			return;
		}
		let data = [
			{
				i: 1,
				n: res.data.whale,
				label: 'Whale Accounts',
				per: '20%',
				tip:"balance >= 10,000,000 CESS"
			},
			{
				i: 2,
				n: res.data.dolphin,
				label: 'Dolphin Accounts',
				per: '20%',
				tip:"1,000,000 CESS > balance >= 100,000 CESS"
			},
			{
				i: 3,
				n: res.data.turtle,
				label: 'Turtle Accounts',
				per: '20%',
				tip:"100,000 CESS > balance >= 10,000 CESS"
			},
			{
				i: 4,
				n: res.data.shrimp,
				label: 'Shrimp Accounts',
				per: '20%',
				tip:"balance < 10,000 CESS"
			},
		];
		let all = 0;
		data.forEach(t => {
			all += t.n;
		});
		data.forEach(t => {
			t.per = parseFloat(((t.n * 100) / all).toFixed(2)) + '%';
		});
		setAccountTypes(data);
		onHover(data[0]);
		const configs = {
			appendPadding: 0,
			padding: 10,
			data,
			angleField: 'n',
			colorField: 'label',
			radius: 1,
			innerRadius: 0.85,
			color: ['#274aa4', '#3c68ce', '#6493fe', '#adc5fa'],
			label: false,
			legend: false,
			statistic: {
				title: false,
				content: {
					content: '',
				},
			},
		};
		setConfig(configs);
	}
	useEffect(() => {
		init();
		initTotal();
	}, []);
	useEffect(() => {
		common.showAPIUrl();
	}, []);

	const props = {
		border: true,
		size: "middle",
		pagesize: 10,
		cacheKey:"account-list",
		loadList: {
			method: api.account.list,
			cb: {
				total: setTotle
			}
		},
		table: {
			columns
		}
	};
	const onHover = (e) => {
		setCurrSpaceInfo(e);
	}

	return (
		<div className={className}>
			<Spin spinning={loading}>
				<div className="containner-in">
					<SearchBar background={"#f4f4f4"} height="100px" />
					<div className="content">
						<div className="overview">
							<div className="left">
								<div className="box1">
									<DCard className="bbbox1" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/overview.png"} />}>
										<div className="box-tit">
											<span>Holders</span>
											<label style={{ display: "none", color: total.holders?.holders_change > 0 ? "#31E1A3" : "#FF5B5B" }}>{total.holders?.holders_change > 0 ? '+' : ''}{total.holders?.holders_change}</label>
										</div>
										<div className="box-con">
											<span className="b1">{total.holders?.holders}</span>
											{/* <label className="b2">24h</label> */}
										</div>
									</DCard>
									<DCard className="bbbox1" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/overview.png"} />}>
										<div className="box-tit">
											<span>Active Accounts (24h)</span>
											<label style={{ display: "none", color: total.holders?.active_accounts_change > 0 ? "#31E1A3" : "#FF5B5B" }}>{total.holders?.active_accounts_change > 0 ? '+' : ''}{total.holders?.active_accounts_change}</label>
										</div>
										<div className="box-con">
											<span className="b1">{total.holders.active_accounts}</span>
											{/* <label className="b2">24h</label> */}
										</div>
									</DCard>
								</div>
								<div className="box2">
									<DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/space.png"} />} title="Miners Info">
										<div className="box-con">
											<div className="box">
												<img src={process.env.PUBLIC_URL + "/img/storage-power.png"} />
												<div>
													<span>Storage Miners</span>
													<label className="gateway-link" onClick={() => navigator('/miner/storage')}>{total.storageMiners}</label>
												</div>
											</div>
											<div className="box">
												<img src={process.env.PUBLIC_URL + "/img/validator.png"} />
												<div>
													<span>Consensus Miners</span>
													<label className="gateway-link" onClick={() => navigator('/miner/consensus')}>{total.consensusMiners}</label>
												</div>
											</div>
											<div className="box">
												<img src={process.env.PUBLIC_URL + "/img/nominator.png"} />
												<div>
													<span>Nominators</span>
													<label className="gateway-link" onClick={() => navigator('/miner/nominator')}>{total.nominators}</label>
												</div>
											</div>
										</div>
									</DCard>
								</div>
							</div>
							<div className="right">
								{accountTypes &&
									<DCard className="bbbox" icon={<img width={16} height={16} src={process.env.PUBLIC_URL + "/img/u269.png"} />} title="Account Type">
										<div className="box">
											{
												currSpaceInfo && <div className="bleft">
													{config && <Pie {...config} />}
													<div className="zx">
														<span>{currSpaceInfo.per}</span>
														<label>{currSpaceInfo.label}</label>
														<span>{currSpaceInfo.n}</span>
													</div>
												</div>
											}
											<div className="bright">
												{
													accountTypes.map(t => {
														return (
															<div className="t3" onMouseOver={() => onHover(t)} key={t.label}>
																<div className={"t3-" + t.i}></div>
																<span className="r-txt-box">
																	<font><Tooltip title={t.tip}>{t.label}</Tooltip></font>
																	<label>{toLocaleString(t.n)}</label>
																</span>
															</div>
														)
													})
												}
											</div>
										</div>
									</DCard>}
							</div>
						</div>
						<div className="list">
							<div>
								<div className="o-title">
									<img src={process.env.PUBLIC_URL + "/img/holder.png"} />
									Accounts  ({totle.toLocaleString("zh", { style: "decimal" })})
								</div>
								<div className="pc-list">
									<ThTable props={props} />
								</div>
								<div className="mobile-list">
									<MList props={props} />
								</div>
							</div>
						</div>
					</div>
					<Footer />
				</div>
			</Spin>
		</div>
	);
};

export default styled(Main)`
	display: block;
	overflow: hidden;
	.overview{
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		margin-bottom: 20px;
		.left{
			width:65%;
			.box1{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.bbbox1{
					width:49.2%;
					.box-tit{
						width:90%;
						margin:0 5%;
						height:60px;
						line-height: 60px;	
						display: flex;
						flex-direction: row;
						justify-content: space-between;					
						span{			
							font-size: 14px;				
							color: #6B7486;
						}
						label{
							font-size: 18px;
						}
					}
				}
				.box-con {
					display: flex;
					flex-direction: row;
					padding:10px 5% 30px;
					justify-content: space-between;
					align-items: center;
					span{			
						font-size: 28px;				
						color: #000;
					}
					label{
						font-size: 14px;
						color: #6B7486;
					}
				}				
			}
			.box2{
				margin-top:20px;
				.box-con {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					padding: 11px 10px;
					.gateway-link{
						color:#0057FF!important;
						cursor: pointer;
					}
					.box {
						width: 33.333%;
						height: 80px;
						display: flex;
						flex-direction: row;
						align-items: center;
						img {
							width: 22px;
							height: 22px;
							margin: 0 20px;
						}
						div {
							display: flex;
							flex-direction: column;
							span {
								font-size: 14px;
								color: #6b7486;
								line-height: 20px;
							}
							label {
								font-size: 20px;
								color: #282e39;
								line-height: 18px;
								font-weight: lighter;
							}
						}
					}
				}				
			}
		}
		.right{
			width:calc(35% - 10px);
			.box{
				position: relative;
				top:0;
				width: 100%;
				overflow: hidden;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.bleft{
					width:220px;
					height:260px;
					position: relative;
					top:0;
					left:10px;
					.zx{
						position: absolute;
						width: 170px;
						height: 170px;
						background-color: #fff;
						border-radius: 100%;
						top: 45px;
    					left: 25px;
						z-index: 0;
						color:#000;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						font-size:14px;
						line-height: 28px;
						label{
							color: #6B7486;
						}
					}
				}
				.bright{
					margin-top: 35px;
					display: flex;
					flex-direction: column;
					width: 40%;
					.t1{
						font-size: 28px;
					}
					.t2{
						font-size: 14px;
						margin-bottom:20px;
						color: rgb(107, 116, 134);
					}
					.t3{
						display: flex;
						flex-direction: row;
						margin-top:10px;
						div{
							width:6px;
							height:28px;
							display: block;
							overflow: hidden;
							border-radius: 6px;
						}
						.t3-1{
							background-color: #274aa4;
						}
						.t3-2{
							background-color: #3c68ce;
						}
						.t3-3{
							background-color: #6493fe;
						}
						.t3-4{
							background-color: #adc5fa;
						}
						.r-txt-box{
							margin-left:20px;
							display: flex;
							flex-direction: column;
							label{
								font-size: 14px;
								color: rgb(0, 0, 0);
							}
							font{
								font-size: 13px;
								color: rgb(107, 116, 134);
							}
						}
					}
				}
			}
		}
	}
	@media screen and (min-width: 700px) and (max-width: 1158px) {
		.overview{
			flex-direction:column!important;
			.left{
				width: 100%;
			}
			.right{
				width: 100%;
				margin-top:20px;
			}
		}
	}
	@media screen and (max-width: 700px) {		
		.overview{
			flex-direction:column!important;
			.left{
				width: 100%;
				display: flex;
				flex-direction: column;				
				.box1{
					flex-direction:column!important;
					width: 100%;		
					.bbbox1{
						width:100%;
					}			
					.bbbox1:last-child{
						margin-top:20px;
					}
				}
				.box-con .box{
					width:50%!important;
					img{
						display: none;
					}
				}
			}
			.right{
				width: 100%;
				margin-top:20px;
			}
		}
	}
`;
